<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
    <h1>商品列表</h1>
    <input type="text" class="arr_sou"><button onclick="sou()">搜索</button>
    <ul class="xr_ul">
     
    </ul>
    <h1>购物车列表</h1><button onclick="qing()">详情业跳转</button>
    <button onclick="qing()">清空购物车</button>
    <input type="checkbox">
      <h3>总价<span class="zong">0</span></h3>
    <div class="xia_div">
        <ul class="xrr_ul">

        </ul>

    </div>
  
    <script>
        var arr = [{
            id: 1,
            name: '苹果手机',
            price: 7999,
            img: 'https://img14.360buyimg.com/pop/jfs/t1/130606/16/39321/57366/6500c480F26263b09/1dae1081a870e677.jpg'
        }, {
            id: 2,
            name: '苹果15',
            price: 5999,
            img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.vdHpsQRuDrkqTm4mYAHWTQHaIh?cb=iwc2&rs=1&pid=ImgDetMain'
        }, {
            id: 3,
            name: '苹果15pro max',
            price: 8999,
            img: 'https://imgservice.suning.cn/uimg1/b2c/image/2FQY9uXx3gJivQ2luhC2hw.jpg_800w_800h_4e'
        }]
        // 获取dom
        var xr_ul = document.querySelector('.xr_ul')
        function xr() {
            arr.forEach(item => {
                xr_ul.innerHTML += `
                <li>
            <img src="${item.img}" alt="">
            <span>${item.name}</span>
            <span>${item.price}</span>
            <button onclick='jia(${item.id})'>加入购物车</button>
            </li>
            `
            })
        } xr()

        // 搜索
        var inp1 = document.querySelector('.arr_sou')
        function sou() {
            var f = arr.find(item => item.name == inp1.value)
            xr_ul.innerHTML = `
             <li>
            <img src="${f.img}" alt="">
             <span>${f.name}</span>
             <span>${f.price}</span>
             <button>加入购物车</button>
        </li>`
        }
        // 购物车数组
        var shuzu = []
        // 渲染购物车
        var div = document.querySelector('.xia_div')
        var ul1 = document.querySelector('.xrr_ul')
        function xrr() {
            ul1.innerHTML = ''
          
            shuzu.forEach(item => {
                ul1.innerHTML += `
        <input type="checkbox" onclass="quan()">
        <img src="${item.img}" alt="">
        <span>${item.name}</span>
        <span>${item.price}</sapn>
        <button onclick='jian(${item.id})'>-</button>
        <span>${item.num}</span>
        <button onclick='jiahao(${item.id})'>+</button>
        <button onclick='shan(${item.id})'>删除</button>`
            })

        } xrr()
        //    总价
        var zong = document.querySelector('.zong')
        function xrr_money() {
            var money = 0
            shuzu.forEach(item => {
                money += item.price * item.num
            })
            zong.innerHTML = money
        } xrr_money()

        //   加入购物车
        function jia(i) {
            var a = arr.find(item => item.id == i)


            shuzu.push({
                id: shuzu.length + 1,
                img: a.img,
                name: a.name,
                price: a.price,
                num: 1
            })
            xrr()
            xrr_money()
        }
        // 删除
        function shan(iid) {
            var a = shuzu.findIndex(item => item.id == iid)
            shuzu.splice(a, 1)
            xrr()
            xrr_money()
        }
        // +
        function jiahao(i) {
            var a = shuzu.find(item => item.id == i)
            a.num++
            xrr()
            xrr_money()
        }
        // -
        function jian(i) {
            var a = shuzu.find(item => item.id == i)
            if (a.num > 1) {
                a.num--
            }

            xrr()
            xrr_money()
        }
        // 清空购物车
        function qing() {
            shuzu.innerHTML = ''
            shuzu = []
            zong.innerHTML = 0
            xrr()
        }
        // 详情业
        function qing(){
            location.assign("./购物车.详情页.html")

        }
        // 全选
function quan(){
       shuzu.forEach(item=>{
           item.is=this.checked
       })
       xrr()
       xrr_money()
}
        </script>
</body>

</html>